<template>
  <section class="loginContainer">
      <div class="loginInner">
        <div class="login_header">
          <h2 class="login_logo">硅谷外卖</h2>
          <div class="login_header_title">
            <a href="javascript:;" :class="{on: loginWay}" @click="loginWay=true">短信登录</a>
            <a href="javascript:;" :class="{on: !loginWay}" @click="loginWay=false">密码登录</a>
          </div>
        </div>
        <div class="login_content">
          <form @submit.prevent = "login">
            <div :class="{on:loginWay}">
              <section class="login_message">
                <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                 <button :disabled="!rightPhone" class="get_verification"
                      :class="{right_phone:rightPhone}" @click.prevent="getCode">
                {{computeTime>0 ? `已发送(${computeTime}s)` : '获取验证码'}}
              </button>
              </section>
              <section class="login_verification">
                <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
              </section>
              <section class="login_hint">
                温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
                <a href="javascript:;">《用户服务协议》</a>
              </section>
            </div>
            <div :class="{on :!loginWay}">
              <section>
                <section class="login_message">
                  <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
                </section>
                <section class="login_verification">
                  <input type="tel" maxlength="8" placeholder="密码" v-if="showPwd" v-model="pwd">
                  <input type="password" maxlength="8" placeholder="密码" v-else v-model="pwd">
                  <div class="switch_button" :class="showPwd ? 'on' :'off'" @click="showPwd=!showPwd">
                    <div class="switch_circle" :class="{right: showPwd}"></div>
                    <span class="switch_text">{{showPwd ? 'abc' : '...'}}</span>
                  </div>
                </section>
                <section class="login_message">
                  <input type="text" v-model="captcha" maxlength="11" placeholder="验证码">
                  <img class="get_verification" src="@/common/img/captcha.svg" alt="captcha" @click="getCaptcha" ref="captcha">
                </section>
              </section>
            </div>
            <button class="login_submit">登录</button>
          </form>
          <a href="javascript:;" class="about_us">关于我们</a>
        </div>
        <a @click="$router.go(-1)" class="go_back">
          <i class="iconfont icon-jiantou2"></i>
        </a>
      </div>
      <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"/>
    </section>
</template>

<script>
import AlertTip from '@/components/AlertTip/AlertTip.vue'
import {reqSendCode, reqSmsLogin, reqPwdLogin} from '@/api'
export default {
  data () {
    return {
      loginWay: true, // true 代表短信登陆 , false 代表密码登陆
      computeTime: 0,
      showPwd: false,
      phone: '',
      code: '',
      name: '',
      pwd: '',
      captcha: '',
      alertText: '',
      alertShow: false
    }
  },

  mounted () {
    this.name = ''
    this.pwd = ''
  },

  computed: {
    rightPhone () {
      return /^1\d{10}$/.test(this.phone)
    }
  },

  methods: {
    // 异步获取短信验证码
    async getCode () {
      // 如果当前没有计时
      if (!this.computeTime) {
        // 启动倒计时
        this.computeTime = 60
        this.intervalId = setInterval(() => {
          this.computeTime--
          if (this.computeTime <= 0) {
            clearInterval(this.intervalId)
          }
        }, 1000)
        // 发送ajax请求(向指定手机号发送验证码短信)
        const result = await reqSendCode(this.phone)
        console.log(result)

        if (result.code === 1) {
          this.alertShow(result.msg)
          // 停止计时
          if (this.computeTime) {
            this.computeTime = 0
            clearInterval(this.intervalId)
            this.intervalId = undefined
          }
        }
      }
    },

    // 异步登陆
    async login () {
      if (this.loginWay) {
        if (!this.rightPhone) {
          this.alertShow = true
          this.alertText = '手机号码不正确'
          return
        } else if (!(/^\d{6}$/gi.test(this.code))) {
          this.alertShow = true
          this.alertText = '验证码不正确'
          return
        }
        // 手机号码登录
        const result = await reqSmsLogin(this.phone, this.code)
        if (result.code === 0) {
          this.userInfo = result.data
        } else {
          this.userInfo = {
            msg: '登录失败，手机号或者验证码不正确  '
          }
        }
      } else {
        if (!this.name) {
          this.alertShow = true
          this.alertText = '请输入手机号/ 邮箱/ 用户名'
          return
        } else if (!this.pwd) {
          this.alertShow = true
          this.alertText = ' 请输入密码'
          return
        } else if (!this.captcha) {
          this.alertShow = true
          this.alertText = '请输入验证码'
          return
        }
        // 密码登录
        const result = await reqPwdLogin(this.name, this.pwd, this.captcha)
        if (result.code === 0) {
          this.userInfo = result.data
        } else {
          this.userInfo = {
            msg: '登录失败，手机号或者验证码不正确  '
          }
        }
      }

      // 如果返回的值不正确，则弹出提示框，返回的值正确则返回上一页
      if (!this.userInfo_id) {
        this.alertShow = true
        this.alertText = this.userInfo.msg
        if (!this.loginWay) {
          this.getCaptcha()
        }
      } else {
        this.$store.dispatch('recordUserInfo', this.userInfo)
        this.$router.back()
      }
    },

    // 关闭警告框
    closeTip () {
      this.alertShow = false
      this.alertText = ''
    },

    // 获取一个新的图片验证码
    getCaptcha () {
      // 每次指定的src要不一样
      this.$refs.captcha.src = 'http://localhost:3000/captcha?time=' + Date.now()
    }
  },

  components: {
    AlertTip
  }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">
 @import 'http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css'
  .loginContainer .loginInner .login_content >form >div .login_verification .switch_button >.switch_circle.right
    left auto
    right -1px
</style>
